const baseUrl = 'http://api-breakingnews-web.itheima.net'

 // 1. 初始化裁剪插件
// let cropper = new Cropper($("#image")[0], {
//     aspectRatio: 1, // 裁剪图层的横纵比例
//     preview: $(".img-preview") // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
// });
/* let cropper

//2.注册选择图片事件
$('.select').on('click', function (e) {
    e.preventDefault()
    $('#file').click()
})
//3.给隐藏的文本input注册事件
$('#file').on('change', function () {
    //3.1.把图片转为直接浏览器能访问的
    const url = window.URL.createObjectURL(this.files[0])
    cropper.replace(url)
})

//4.确认按钮
// 将blob对象 => 后台要求的base64的字符串
// 生成的格式 => avatar=base64格式的字符串
$('.sure').on('click', e => {
    e.preventDefault()
    const canvas = cropper.getCroppedCanvas({ // 利用cropper的方法, 把裁剪区域输出到一个canvas标签上 // width和height是canvas标签的大小
        width: 100,
        height: 100
    });
    // canvas toDataURL => base64 
    // 后台通知 => 无法去解析当前的base64
    let base64Str = canvas.toDataURL("image/jpeg"); // canvas图像 -> base64字符串
    base64Str = encodeURIComponent(base64Str)
    const dataStr = `avatar=${base64Str}`
    axios.post(`${baseUrl}/my/update/avatar`,dataStr,{
        headers: {
            Authorization: localStorage.getItem('token')
        }
    }).then(res => {
        if(res.data.status === 0){
            window.parent._getUser()
        }
    })

})


function getUser() {
    axios.get(`${baseUrl}/my/userinfo`, {
      headers: {
        Authorization: localStorage.getItem('token')
      }
    }).then(res => {
      const { status } = res.data
      if (status === 0) {
        const {user_pic } = res.data.data
        // 判断当前用户是否有头像信息,如果有的话=> 将裁剪框的图片显示做替换
        if(user_pic) $('#image').prop('src',user_pic)
  
        // image 设置完最新的图片信息之后 ,在做初始化cropper
        cropper = new Cropper($("#image")[0], {
          aspectRatio: 1, // 裁剪图层的横纵比例
          preview: $(".img-preview") // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
        });
        // console.log($("#image").prop('src'));
      }
      // 验证失败
      if (status === 1) {
        // 为了安全性=>为了代码的简洁性=> 将本地存储的token 清除掉
        localStorage.removeItem('token')
        location.href = '/login.html'
      }
    })
  }
  getUser() 
 */


// 1. 初始化裁剪插件   刚开始获取的是默认的图片
let cropper  
// = new Cropper($("#image")[0], {
//   aspectRatio: 1, // 裁剪图层的横纵比例
//   preview: $(".img-preview") // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
// });

//选择题
$('.select').on('click', e => {
  e.preventDefault()
  $('#file').click()
})
//上传图片
$('#file').on('change', function () {
  //3.1.把图片转为直接浏览器能访问的
  const url = window.URL.createObjectURL(this.files[0])
  cropper.replace(url)
})
//确定
$('.sure').on('click', e => {
  e.preventDefault()
  const canvas = cropper.getCroppedCanvas({ // 利用cropper的方法, 把裁剪区域输出到一个canvas标签上 // width和height是canvas标签的大小
    width: 100,
    height: 100
  });
  // 后台通知 => 无法去解析当前的base64
  let base64Str = canvas.toDataURL("image/jpeg"); // canvas图像 -> base64字符串
  base64Str = encodeURIComponent(base64Str)
  const dataStr = `avatar=${base64Str}`
    axios.post(`${baseUrl}/my/update/avatar`,dataStr,{
      headers: {
        Authorization: localStorage.getItem('token')
    }
    }).then(res=>{
      if(res.data.status === 0){
        window.parent.getUser()
      }
    })
})
// ============================================================为了从后端拿去上传的图片渲染到本地预览的
function getUser() {
  axios.get(`${baseUrl}/my/userinfo`, {
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then(res => {
    const { status } = res.data
    if (status === 0) {
      const {user_pic } = res.data.data
      // 判断当前用户是否有头像信息,如果有的话=> 将裁剪框的图片显示做替换
      if(user_pic) $('#image').prop('src',user_pic)

      // image 设置完最新的图片信息之后 ,在做初始化cropper
      cropper = new Cropper($("#image")[0], {
        aspectRatio: 1, // 裁剪图层的横纵比例
        preview: $(".img-preview") // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
      });
      // console.log($("#image").prop('src'));
    }
    // 验证失败
    if (status === 1) {
      // 为了安全性=>为了代码的简洁性=> 将本地存储的token 清除掉
      localStorage.removeItem('token')
      location.href = '/login.html'
    }
  })
}
getUser()





